<template>
  <div class="summary-wrap">
    <!--    <title-bar />-->
    <div style="display: flex;">
      <div style="height: 70mm; width: 100%">
        <div style="display: flex; flex-direction: column; align-items: center">
          <div class="title">新疆远届{{printData.dt}}土豆收购汇总表</div>
          <div>
            <table style="width: 900px">
              <tr>
                <td>货物名称</td>
                <td>总车数(车)</td>
                <td>总净重(公斤)</td>
                <td>货物金额(公斤)</td>
                <td>卸车费(元)</td>
                <td>结算金额(元)</td>
                <td>平均单价(元/吨)</td>
              </tr>
              <tr>
                <td>{{ printData.productName }}</td>
                <td>{{ printData.totalCar }}</td>
                <td>{{ printData.totalWeight }}</td>
                <td>{{ printData.totalPrice }}</td>
                <td>{{ printData.unloadFee }}</td>
                <td>{{ printData.settlementFee }}</td>
                <td>{{ printData.averagePrice }}</td>
              </tr>
            </table>
          </div>

          <div class="footer">
            <div style="min-width: 250px">制表时间: {{ dayjs().format("YYYY-MM-DD HH:mm:ss") }}</div>
            <div style="min-width: 250px; margin-left: 500px">
              制表人: {{ printData.creator }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue"
import dayjs from "dayjs"

const props = defineProps({
  printType: {
    type: String,
    default: ""
  },
  data: {
    type: Object,
    default: {}
  }
})

const printData = reactive(props.data)
</script>

<style lang="scss" scoped>
.summary-wrap {
  .title {
    font-size: 27px;
    /*font-weight: bold;*/
    margin-bottom: 30px;
  }
  .info {
    text-align: left;
    margin: 5px 0;
    font-size: 20px;
  }
  table {
    width: 700px;
    border-collapse: collapse;
    font-size: 20px;
  }
  td,
  th {
    border: 1px solid #000;
    padding: 4px 6px;
    text-align: center;
  }

  .footer {
    display: inline-flex;
    margin-top: 10px;
    font-size: 17px;
    text-align: left;
    width: 900px;
  }
}
</style>
